<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>随鼠标滚动而沿弧形轨迹运动</title>
<style>
  #arc {
    width: 200px;
    height: 200px;
    border: 1px solid black;
    border-radius: 50%;
    position: relative;
    margin: 50px auto;
  }
  #image {
    width: 50px;
    height: 50px;
    position: absolute;
    top: 75px; /* 初始位置 */
    left: 75px; /* 初始位置 */
  }
</style>
</head>
<body>

<div id="arc">
  <img id="image" src="your-image-url.jpg" alt="弧形轨迹上的图片">
</div>

<script>
  const image = document.getElementById('image');
  const arc = document.getElementById('arc');
  const radius = arc.clientWidth / 2 - image.clientWidth / 2;
  let angle = 0;
  let startAngle = 0; // 弧形起始角度
  let endAngle = Math.PI; // 弧形结束角度

  function animate() {
    angle += 0.01; // 控制速度，数值越小速度越慢
    const x = radius * Math.cos(angle + startAngle) + radius;
    const y = radius * Math.sin(angle + startAngle) + radius;

    image.style.left = x + 'px';
    image.style.top = y + 'px';

    requestAnimationFrame(animate);
  }

  // 监听鼠标滚轮事件，改变弧形起始角度和结束角度
  arc.addEventListener('wheel', function(e) {
    e.preventDefault(); // 阻止默认滚动行为
    if (e.deltaY < 0) {
      startAngle -= Math.PI / 4; // 滚轮向上滚动，起始角度向左旋转45度
      endAngle -= Math.PI / 4; // 滚轮向上滚动，结束角度向左旋转45度
    } else {
      startAngle += Math.PI / 4; // 滚轮向下滚动，起始角度向右旋转45度
      endAngle += Math.PI / 4; // 滚轮向下滚动，结束角度向右旋转45度
    }
  });

  animate();
</script>

</body>
</html>
